<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="icon" href="/static/assets/images/CMT-logo.png" />
    <meta name="description" content="可解释性多导睡眠监测系统" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>抑郁症诊断报告</title>
    <link href="/static/assets/css/side-bar.css" rel="stylesheet">
    <link href="/static/assets/css/top-bar.css" rel="stylesheet">
    <script src="/static/echarts-5.4.1/dist/echarts.js"></script>
</head>

<body>
    <style>
        body {
            background: rgba(246, 246, 246, 1);
        }

        .report-header {
            position: relative;
            width: 1150px;
            height: 77px;
            border-radius: 14px;
            background: #FFFFFF;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            padding: 0 20px;
        }

        .report-title {
            font-size: 24px;
            font-weight: 400;
            font-family: "SourceHanSansCN-Regular";
            color: #000;
            margin-right: 40px;
        }

        .report-id {
            font-size: 18px;
            color: rgba(88, 151, 219, 1);
            text-decoration: underline;
            margin-right: 40px;
        }

        .patient-name,
        .report-time {
            font-size: 18px;
            color: #000;
            margin-right: 40px;
        }

        .report-card {
            background: #FFFFFF;
            border-radius: 14px;
            margin-bottom: 20px;
            padding: 15px;
        }

        .card-header {
            font-size: 18px;
            color: rgba(8, 22, 21, 1);
            margin-bottom: 15px;
        }

        .tabnet-card {
            width: 1150px;
            height: 900px;
            min-height: 900px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 ;
        }

        .tabnet-img {
            width: 90%;
            height: 800px;
            margin: 40px auto 0;
            display: block;
            position: relative;
            object-fit: contain;
        }

        .chart-row {
            display: flex;
            justify-content: space-between;
            gap: 40px;
        }

        .radar-card,
        .pie-card {
            width: calc(50% - 20px);
            height: 380px;
            position: relative;
        }

        .chart-container {
            width: 100%;
            height: 320px;
        }

        .chart-legend {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .legend-item {
            display: flex;
            align-items: center;
            margin-right: 20px;
            margin-bottom: 5px;
        }

        .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 2px;
            margin-right: 5px;
        }

        .legend-text {
            font-size: 12px;
            color: #666;
        }

        .report-container {
            width: 1150px;
            margin: 0 auto;
            padding-top: 100px;
        }

        .axis-label {
            position: absolute;
            font-size: 14px;
            color: #666;
        }

        .y-axis-label {
            position: absolute;
            font-size: 14px;
            color: #666;
            left: 5px;
            top: 40px;
            transform: rotate(-90deg);
            transform-origin: left top;
        }

        .x-axis-label {
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .tabnet-card .y-axis-label {
            position: absolute;
            font-size: 16px;
            color: #666;
            top: calc(50% + 50px);
            transform: translateY(-50%);
            writing-mode: vertical-lr;
            text-orientation: upright;
            letter-spacing: 5px;
            height: 800px;
            display: flex;
            align-items: center;
        }

        .tabnet-card .x-axis-label {
            position: absolute;
            font-size: 16px;
            color: #666;
            bottom: 80px;
            left: calc(50% - 200px);
            transform: translateX(-50%);
            white-space: nowrap;
        }

        .tabnet-card .card-header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 15px;
            font-size: 18px;
            color: rgba(8, 22, 21, 1);
            margin-bottom: 0;
            z-index: 1;
        }
    </style>

    {% with active_page='depression_report' %}
    {% include 'includes/side-bar.html' %}
    {% endwith %}

    <div class="frame-right">
        <div class="vec-rectangle-split-line"></div>
        {% include 'includes/top-bar.html' %}


        <div class="report-container">
            <div class="report-header">
                <div class="report-title">抑郁症诊断报告</div>
                <div class="report-id"># 0992</div>
                <div class="patient-name">病人 : 王立群</div>
                <div class="report-time">报告时间 : {{ report_time }}</div>
            </div>

            <div class="report-card tabnet-card">
                <div class="card-header">TabNet抑郁症分类的解释图</div>
                <div class="y-axis-label axis-label">七个特征对分类的重要程度</div>
                <div class="x-axis-label axis-label">受试者</div>
                <img src="/static/picture/picture_6.png" class="tabnet-img" />
            </div>

            <div class="chart-row">
                <div class="report-card radar-card">
                    <div class="card-header">抑郁症特征权重雷达图</div>
                    <div id="radar-chart" class="chart-container"></div>
                </div>

                <div class="report-card pie-card">
                    <div class="card-header">抑郁症倾向程度饼状图</div>
                    <div id="pie-chart" class="chart-container"></div>
                    <div class="chart-legend">
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #91cc75;"></div>
                            <div class="legend-text">无抑郁</div>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #fac858;"></div>
                            <div class="legend-text">轻度抑郁</div>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #ee6666;"></div>
                            <div class="legend-text">中度抑郁</div>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #5886e2;"></div>
                            <div class="legend-text">重度抑郁</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var radarChart = echarts.init(document.getElementById('radar-chart'));

        var radarOption = {
            tooltip: {
                trigger: 'axis'
            },
            radar: {
                indicator: [
                    { name: '入睡潜伏期', max: 100 },
                    { name: 'REM潜伏期', max: 100 },
                    { name: '轻睡比例', max: 100 },
                    { name: '慢波睡眠比例', max: 100 },
                    { name: 'REM比例', max: 100 },
                    { name: '睡眠维持率', max: 100 },
                    { name: '觉醒次数', max: 100 }
                ]
            },
            series: [{
                name: '抑郁症特征权重',
                type: 'radar',
                data: [
                    {
                        value: [85, 65, 72, 45, 80, 68, 92],
                        name: '特征权重',
                        areaStyle: {
                            color: 'rgba(129, 70, 255, 0.4)'
                        },
                        lineStyle: {
                            color: 'rgba(129, 70, 255, 1)'
                        },
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.value;
                            }
                        }
                    }
                ]
            }]
        };

        radarChart.setOption(radarOption);

        var pieChart = echarts.init(document.getElementById('pie-chart'));

        var pieOption = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            series: [
                {
                    name: '抑郁倾向程度',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '18',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 45, name: '无抑郁' },
                        { value: 25, name: '轻度抑郁' },
                        { value: 18, name: '中度抑郁' },
                        { value: 12, name: '重度抑郁' }
                    ]
                }
            ]
        };

        pieChart.setOption(pieOption);

        window.addEventListener('resize', function () {
            radarChart.resize();
            pieChart.resize();
        });
    </script>
</body>

</html>